<template>
  <div
    class="userComment"
    v-loading="loading"
    element-loading-text="正在用户评论表 "
    element-loading-spinner="el-icon-loading"
  >
    <div class="sample_dis" v-show="loading === false">
        <div class="table-box">
        <template>
        <el-table
         :data="tableData"
         stripe style="width: 100%"
         >
             <el-table-column
            type="index"
            width="50">
            </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="date" label="评论日期" width="120">
          </el-table-column>
          <el-table-column prop="comment" label="评论关键词" width="400">
          </el-table-column>
          <el-table-column prop="star" label="星级评分" width="60">
          </el-table-column>
          <el-table-column prop="kouwei" label="口味评分" width="60">
          </el-table-column>
          <el-table-column prop="env" label="环境评分" width="60">
          </el-table-column>
          <el-table-column prop="fuwu" label="服务评分" width="60">
          </el-table-column>
          <el-table-column prop="shopID" label="商店ID" width="70">
          </el-table-column>
          <el-table-column prop="commentLen" label="评论长度" width="60">
          </el-table-column>
        </el-table>
      </template>
      <el-pagination
            background
            layout="prev, pager, next"
            @current-change="pageChange"
            :page-size="pageSize"
            align="center"
            style="margin-top:15px;"
            :total="total">
            </el-pagination>
        </div>
  
      <!-- <span>用户评论表</span> -->
    </div>
  </div>
</template>

<script>
import {Table, TableColumn, Pagination} from 'element-ui';
export default {
    components:{
        [Table.name]: Table,
        [TableColumn.name]: TableColumn,
        [Pagination.name]: Pagination,
    },
  data() {
    return {
      loading: true,
      tableData:[],
      total:0,
      pageSize:3,
      page:1,
    };
  },
  created() {
    this.$http.get("/getTable").then((res) => {
      let dataArr = res.data.data;
      dataArr.forEach(item => {
            let obj = {}
            obj.name = item[0];
            obj.date = item[1];
            obj.star = item[8];
            obj.kouwei = item[4]
            obj.env = item[5]
            obj.fuwu = item[6]
            obj.shopID = item[7]
            obj.comment = item[3]
            obj.commentLen = item[13]
            this.tableData.push(obj)

      });
     this.copyTableDate = JSON.parse(JSON.stringify(this.tableData))
     this.total =  this.copyTableDate.length;
     this.showTableNum();

    });
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  methods:{
      showTableNum(){
          
          this.tableData = this.copyTableDate.filter((item,index)=>{
              let prevIdx = (this.page -1)*this.pageSize;
              let idx = this.page * this.pageSize - 1; 
              if(prevIdx<= index && index<=idx) return true;
              else return false;
          })
      },
      pageChange(page){
          console.log('pagechange');
          console.log(page);
          this.page = page
          this.showTableNum()
      },
  }
};
</script>

<style lang='scss' scoped>
.userComment {
  margin: 40px 15px 15px 15px;
  height: calc(100vh - 90px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /deep/ .el-loading-mask {
    background-color: #fff !important;
  }
  .sample_dis {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .table-box{
        width: 75%;
    }
    span {
      color: #898989;
      font-size: 24px;
      line-height: 36px;
    }
  }
}
</style>